import { Button, Form, Input } from 'antd';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import './login.scss';
const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const onFinish = (values:any) => {
    console.log('Success:', values);
    setLoading(true);
    setTimeout(() => {
      localStorage.setItem('token', 'token');
      setLoading(true);
      navigate('/home');
    }, 500);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='login'>
      <div className='login-container'>
        <Form
          name="basic"
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 22 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="username"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input placeholder="账号" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder="密码"  />
          </Form.Item>
          <div className='flex_center'>
            <Button type="primary" htmlType="submit" loading={loading}>
              登录
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default App;